<template>
  <div>
    <el-button type="primary" @click="showModal">添加地址</el-button>
  </div>
  <div>
    <ul class="adder" v-for="item in addressList">
      <li class="address-name">
        <div :class="item.isDef === 1 ? 'def-name' : 'no-def-name'">
          {{ item.firstName }}
        </div>

        {{ item.name }}
      </li>
      <!-- <li>{{ item.isDef === 1 ? '默认' : 'bu默认' }}</li> -->
      <li>{{ item.mobilePhone }}</li>
      <!-- <li>{{ item.createTime }}</li> -->
      <li>{{ item.address }}</li>
      <li>
        <el-button type="primary" :icon="Edit" circle @click="showEdit(item)" />
        <el-popconfirm
          title="你确定删除该地址吗?"
          @confirm="deleteAddressById(item.id)"
          confirm-button-text="确定"
          cancel-button-text="取消"
        >
          <template #reference>
            <el-button :icon="Delete" circle />
          </template>
        </el-popconfirm>
      </li>
    </ul>
  </div>

  <el-dialog
    v-model="dialogVisible"
    :title="type === 'add' ? '添加地址' : '编辑地址'"
    @close="handleClose"
    width="500px"
  >
    <el-form
      :model="addressForm"
      :rules="formRules"
      label-width="100px"
      style="max-width: 460px"
      ref="addressForm"
    >
      <el-form-item label="收件人姓名" prop="name">
        <el-input v-model="addressForm.name"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="mobilePhone">
        <el-input
          v-model="addressForm.mobilePhone"
          placeholder="请输入11位手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="默认" prop="isDef">
        <el-switch
          v-model="addressForm.isDef"
          active-text="是"
          inactive-text="否"
          inline-prompt
        />
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <!-- <el-input
          type="textarea"
          autosize
          v-model="addressForm.address"
        ></el-input> -->
        <area-picker
          ref="picker"
          v-model="addressForm.address"
          :columns="3"
          @pick="handlePick"
        />
      </el-form-item>
      <el-form-item label="详细地址" prop="detailAddress">
        <el-input
          type="textarea"
          v-model="addressForm.detailAddress"
        ></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">保存地址</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
</script>

<script>
import {
  adderList,
  deleteAdder,
  updateAddress,
  createAdder
} from '../api/address.js'
export default {
  data() {
    return {
      userInfo: JSON.parse(window.localStorage.getItem('user_info')),
      dialogVisible: false,
      addressList: [],
      addressForm: {
        recipientName: '',
        phoneNumber: '',
        address: ''
      },
      type: 'add',
      formRules: {
        recipientName: [
          { required: true, message: '请输入收件人姓名', trigger: 'blur' }
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    showModal() {
      this.dialogVisible = true
      this.addressForm = {}
    },
    handlePick(value) {
      console.log(value)
      this.addressForm.address = value.map((item) => item.name).join('')
    },
    handleClose() {},
    showEdit(info) {
      this.dialogVisible = true
      this.addressForm = info
      this.type = 'edit'
    },
    getList() {
      adderList(this.userInfo.id).then((res) => {
        console.log(res)
        this.addressList = res
        this.addressList = this.addressList.map((item) => {
          return {
            ...item,
            firstName: item.name.split('')[0]
          }
        })
      })
    },
    deleteAddressById(id) {
      deleteAdder(id).then((res) => {
        ElMessage.success('删除成功！')
        getList()
      })
    },
    handleSubmit() {
      this.$refs.addressForm.validate((valid) => {
        if (valid) {
          const params = {
            ...this.addressForm,
            address: this.addressForm.address + this.addressForm.detailAddress,
            isDef: this.addressForm.isDef ? 1 : 0,
            userId: this.userInfo.id
          }
          if (this.type === 'add') {
            console.log(this.addressForm)

            createAdder(params).then((res) => {
              this.dialogVisible = false
              this.getList()
            })
          } else {
            updateAddress(params).then((res) => {
              this.dialogVisible = false
              this.getList()
            })
          }
        }
      })
    }
  },
  created() {
    this.getList()
  }
}
</script>
<style lang="less" scoped>
.adder {
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 20px 0;
  align-items: center;

  .address-name {
    display: flex;
    align-items: center;
  }

  .def-name {
    background: linear-gradient(to right, #ff0000, #fc7544);
    color: #fff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    font-weight: 600;
    margin-right: 10px;
  }
  .no-def-name {
    background: #fff;
    color: #ff0000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 37px;
    font-size: 22px;
    font-weight: 600;
    margin-right: 10px;
    border: 1px solid #ff0000;
  }
}

.el-tab-pane {
  padding: 0 20px;
  padding-left: 40px;
}
</style>
